<template>
	<view>
		<u-navbar title="每日签到" back-icon-color="#f1f1f1" :border-bottom="false" title-color="#f1f1f1" :background="navbarBackground"></u-navbar>
		<view class="main">
			<scroll-view scroll-y>
				<view class="top">
					<view class="top-top">
						<text>当前积分：</text>
						<text class="integral">{{ integral }}</text>
					</view>
					<u-button :custom-style="customStyle" shape="circle" :hair-line="false" :ripple="true" ripple-bg-color="#8EB7FA" @click="handleQD">
						{{ clock == true ? '今日已签到' : '立即签到' }}
					</u-button>
					<view class="sub">
						今日签到可获得
						<text style="color: #E3AD3A;">1</text>
						积分
					</view>
				</view>
				<view class="calendar">
					<view class="calendar-top">
						已签
						<text style="color: #E3AD3A;">{{ count }}</text>
						天
					</view>
					<uni-calendar :safe-area-inset-bottom="true"></uni-calendar>
				</view>
				<view class="tabs">
					<u-subsection :list="list" font-size="24" :current="current" mode="subsection" inactive-color="#305189" active-color="#E3AD3A" @change="changeTabs"></u-subsection>
				</view>
				<view class="list">
					<view class="item" v-for="(item, index) in showlist" :key="index">
						<view class="item-left">
							<text class="number">{{ index + 1 }}</text>
							<view class="left">
								<u-image width="110" height="110" shape="circle" :src="item.photo"></u-image>
								<view class="left-right">
									<text>{{ item.username }}</text>
									<text>{{ '积分值 ' + item.integral }}</text>
								</view>
							</view>
						</view>
						<view class="item-right">{{ `已签${item.integral_count}天` }}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import uniCalendar from '../../../components/uni-calendar/uni-calendar.vue';
export default {
	components: {
		uniCalendar
	},
	data() {
		return {
			showCalendar: true,
			navbarBackground: {
				backgroundImage: 'linear-gradient(90deg, rgb(27,52,92), rgb(49,84,142))'
			},
			customStyle: {
				width: '70vw',
				backgroundColor: '#3d6fc1',
				color: '#f1f1f1',
				margin: '50rpx 0',
				border: 'none'
			},
			list: [
				{
					name: '周榜'
				},
				{
					name: '月榜'
				}
			],
			current: 0,
			integral: '', // 累计积分
			clock: false, // 是否签到
			count: 0, // 签到次数
			showlist: [], // 展示列表
			weekRank: [], // 元数据
			monthRank: [] // 元数据
		};
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		this.onPageInit();
	},
	methods: {
		onPageInit() {
			// 检查是否签到
			this.$tkRequest('/api/User/checkSign').then(res => {
				res.data.is_sign == 1 ? (this.clock = true) : (this.clock = false);
			});
			// 获取签到信息
			this.$tkRequest('/api/User/userInfo').then(res => {
				this.integral = res.data.integral;
			});
			// 获取已签到次数
			this.$tkRequest('/api/User/getSignCount').then(res => {
				this.count = res.data.count;
			});
			// 签到周榜
			this.$tkRequest('/api/User/weekly').then(res => {
				this.weekRank = res.data;
				this.showlist = this.weekRank;
			});
			// 签到月榜
			this.$tkRequest('/api/User/monthly').then(res => {
				this.monthRank = res.data;
			});
		},
		changeTabs(index) {
			this.current = index;
			if (this.current == 0) {
				this.showlist = this.weekRank;
			} else {
				this.showlist = this.monthRank;
			}
		},
		// 签到
		handleQD() {
			if (this.clock) {
				uni.showToast({
					title: '今日已签到',
					icon: 'none'
				});
				return false;
			} else {
				this.$tkRequest('/api/User/sign').then(res => {
					uni.showToast({
						title: '恭喜您，签到成功，获得1积分'
					});
					this.onPageInit();
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	scroll-view {
		max-height: 95vh;
	}
	.top {
		background-image: linear-gradient(90deg, rgb(27, 52, 92), rgb(49, 84, 142));
		padding: $uni-spacing-col-lg 0 140rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #f1f1f1;
		font-size: 10pt;

		.top-top {
			.integral {
				font-size: 1.8rem;
			}
		}
	}

	.calendar {
		margin: -100rpx $uni-spacing-row-lg 0 $uni-spacing-row-lg;
		border-radius: 15rpx;
		background-color: #fff;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 12pt;
		box-shadow: 0 5rpx 5rpx #eee;

		.calendar-top {
			padding: $uni-spacing-col-lg 0;
		}
	}

	.tabs {
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		margin-top: $uni-spacing-col-lg;
		background-color: #fff;
	}

	.list {
		background-color: #fff;
		padding-bottom: $uni-spacing-col-lg;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: $uni-spacing-col-base $uni-spacing-row-lg;

			.item-left {
				display: flex;
				align-items: center;

				.number {
					padding-right: $uni-spacing-row-lg;
				}

				.left {
					display: flex;
					align-items: center;
				}

				.left-right {
					display: flex;
					flex-direction: column;
					padding-left: $uni-spacing-row-sm;
					color: #305189;

					text:first-child {
						padding-bottom: $uni-spacing-col-sm;
					}
				}
			}

			.item-right {
				font-size: 1rem;
				color: #e3ad3a;
			}
		}
	}
}
</style>
